<template>
	<view v-if="isShow" class="picker-containers">
	  <view class="picker-masks" @click="closeOutPicker()"></view>
	  <view class="picker-contents">
	    <view class="picker-headers">
	      <text class="picker-cancels" @click="closeOutPicker()">取消</text>
	      <text class="picker-titles">{{title}}</text>
	      <text class="picker-confirms" @click="confirmOut()">确定</text>
	    </view>
	    <scroll-view scroll-y class="picker-lists">
	      <view  class="picker-items" v-for="(item, index) in List"  :key="index" 
	            :class="{ 'selecteds': id === item.id }"
	            @click="selectOutOption(item)">
	        <text>{{ item.name }}</text>
	      </view>
		  <view class="black-boxs">
		  	
		  </view>
	    </scroll-view>
		
	  </view>
	</view>
</template>

<script>
import { string } from '../uni_modules/uv-ui-tools/libs/function/test';

	export default {
		name:"pickerCom",
		props:{
			isShow:{
				type:Boolean,
				default:false
			},
				
			List:{
				type:Array,
				default:[]
			},
			id:String,
			title:String,
			
			
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.picker-containers {
		  position: fixed;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  top: 0;
		  z-index: 11000;
		}
		
		.picker-masks {
		  position: absolute;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background-color: rgba(0, 0, 0, 0.4);
		}
		
		.picker-contents {
		  position: absolute;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  height: 500rpx;
		  background-color: #FFFFFF;
		  border-top-left-radius: 16px;
		  border-top-right-radius: 16px;
		}
		
		.picker-headers {
		  display: flex;
		  height: 53px;
		  flex-direction: row;
		  justify-content: space-between;
		  align-items: center;
		  padding: 0 16px;
		  border-bottom-width: 1px;
		  border-bottom-color: #EEF2F9;
		  margin-bottom: 30rpx;
		}
		
		.picker-titles {
		  font-size: 16px;
		  color: #1D2129;
		  font-weight: 400;
		}
		
		.picker-cancels, .picker-confirms {
		  font-size: 16px;
		}
		
		.picker-cancels {
		  color: #86909C;
		}
		
		.picker-confirms {
		  color: #165DFF;
		}
		
		.picker-lists {
		  padding: 24rpx 0;
		  max-height: 350rpx;
		  /* overflow: scroll; */
		}
		
		.picker-items {
			display: flex;
		  height: 44px;
		  flex-direction: row;
		  justify-content: center;
		  align-items: center;
		  padding: 0 16px;
		  overflow: hidden;
		  white-space: nowrap;
		  text-overflow: ellipsis;
		}
		.selecteds{
			background-color: #E8F3FF;
		}
		.black-boxs{
			height: 50rpx;
		}
		.picker-items text {
		  font-size: 16px;
		  color: #1D2129;
		}
</style>